<template>
  <div>
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="formInline.classname"
          placeholder="课程名称"
        ></el-input>
      </el-form-item>

      <el-form-item prop="type">
        <el-select
          class="se_input"
          v-model="formInline.classtype"
          placeholder="课程类别"
        >
          <el-option selected value="">请选择</el-option>
          <el-option value="管理类">管理类</el-option>
          <el-option value="项目类">项目类</el-option>
          <el-option value="技能类">技能类</el-option>
          <el-option value="其他类">其他类</el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item prop="type">
        <el-select
          class="se_input"
          v-model="formInline.examethod"
          placeholder="考核方法"
        >
          <el-option selected value="">请选择</el-option>
          <el-option value="小组讨论">小组讨论</el-option>
          <el-option value="在线学习">在线学习</el-option>
          <el-option value="演讲授课">演讲授课</el-option>
          <el-option value="经验分享">经验分享</el-option>
          <el-option value="其他">其他</el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="position: relative; left: 300px">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="flush"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-form>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >创建</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-upload el-icon--right"
          @click="exportExcelSelect()"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="ID" width="90">
      </el-table-column>
      <el-table-column sortable prop="classid" label="课程ID" width="150">
      </el-table-column>
      <el-table-column sortable prop="classname" label="课程名称" width="100">
      </el-table-column>
      <el-table-column sortable prop="classtype" label="课程类别" width="140">
      </el-table-column>
      <el-table-column sortable prop="traintime" label="培训课时" width="130">
      </el-table-column>
      <el-table-column sortable prop="examethod" label="考核方法" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="课程ID:" prop="classid" style="width: 300px">
          <el-input
            size="small"
            v-model="editForm.classid"
            auto-complete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程类别:" prop="classtype" style="width: 300px">
          <el-select
            v-model="editForm.classtype"
            class="se_input"
            style="width: 180px"
          >
            <el-option selected value="">请选择</el-option>
            <el-option value="管理类">管理类</el-option>
            <el-option value="项目类">项目类</el-option>
            <el-option value="技能类">技能类</el-option>
            <el-option value="其他类">其他类</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="培训课时" prop="traintime" style="width: 300px">
          <el-input
            size="small"
            v-model="editForm.traintime"
            auto-complete="off"
            placeholder="培训课时"
          ></el-input>
        </el-form-item>

        <el-form-item label="培训讲师" prop="trainmanid" style="width: 300px">
          <el-select
            size="small"
            v-model="editForm.trainmanid"
            placeholder="培训讲师"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id" 
              :label="`${item.name}`"
              :value="item.id"
             
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注信息:" prop="remark" style="width: 480px">
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item>

        <el-form-item label="课程名称" prop="classname" style="width: 300px">
          <el-input
            size="small"
            v-model="editForm.classname"
            auto-complete="off"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="考核方法:" prop="examethod" style="width: 300px">
          <el-select
            v-model="editForm.examethod"
            class="se_input"
            style="width: 180px"
          >
            <el-option selected value="">请选择</el-option>
            <el-option value="小组讨论">小组讨论</el-option>
            <el-option value="在线学习">在线学习</el-option>
            <el-option value="演讲授课">演讲授课</el-option>
            <el-option value="经验分享">经验分享</el-option>
            <el-option value="其他">其他</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程目标:" prop="remark" style="width: 480px">
          <el-input type="textarea" v-model="editForm.Cobjectives"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 导出表格 -->
    <el-dialog title="表格保存预览" width="50%" :visible.sync="selectWindow">
      <el-table :data="selectData" id="selectTable" height="380px">
        <el-table-column sortable prop="id" label="ID" width="90">
        </el-table-column>
        <el-table-column sortable prop="classid" label="课程ID" width="90">
        </el-table-column>
        <el-table-column sortable prop="classname" label="课程名称" width="100">
        </el-table-column>
        <el-table-column sortable prop="classtype" label="课程类别" width="140">
        </el-table-column>
        <el-table-column sortable prop="traintime" label="培训课时" width="130">
        </el-table-column>
        <el-table-column
          sortable
          prop="trainmethod"
          label="培训方法"
          width="100"
        >
        </el-table-column>
        <el-table-column sortable prop="examethod" label="考核方法" width="100">
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcel">确定保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import htmlToExcel from "@/utils/htmlToExcel";
export default {
  name: "ExcelPage",
  data() {
    return {
      selectData: [],
      selectWindow: false,
      value: "",
      loading: false, //是显示加载
      nshow: true, //switch开启
      fshow: false, //switch关闭
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      formInline: {
        page: 1,
        limit: 1000,
        classname: "",
        classtype: "",
        examethod: "",
      },
      teacherList:[],
      formInline1: {
        page: 1,
        limit: 1000,
        varLable: "",
        varName: "",
        name: "",
        mechanism: "",
        appendix: "",
        remark: "",
        department: "",
        source: "",
      },
      editForm: {
        id: "",
        classid: "",
        classtype: "",
        traintime: "",
        trainmanid: "",
        courseware: "",
        remark: "",
        classname: "",
        trainmethod: "",
        examethod: "",
        Cobjectives: "",
        deleted: "",
      },
      //   rules表单验证
      rules: {
        classtype: [
          { required: true, message: "请输入课程类别", trigger: "blur" },
        ],
        traintime: [
          { required: true, message: "请输入培训课时", trigger: "blur" },
        ],
        trainmanid: [
          { required: true, message: "请输入培训讲师", trigger: "blur" },
        ],
        classname: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
        ],
        examethod: [
          { required: true, message: "请输入考核方法", trigger: "blur" },
        ],
      },
      seletedata: {
        ids: "",
        // token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 2,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  created() {
    this.getdata(this.formInline);
    // this.getTeacherData();
  },

  mounted() {
    this.getTeacherData();
  },
  methods: {
    //获取公司列表
    getdata(pageparm) {
      this.loading = true;
      //模拟数据开始
      this.loading = false;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      /**
       * 调用接口，注释上面的模拟数据 取消下面注释
       */
      this.$axios
        .post(
          "/course/find/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize,
          this.formInline
        )
        .then((res) => {
          console.log(this.formInline.type + "发送之前的值");
          console.log(res);
          console.log(res.obj.total);
          this.loading = false;
          if (res.code == 200) {
            this.listData = res.obj.records;

            this.pageparm.currentPage = res.obj.current;
            // this.pageparm.pageSize=res.obj.pageSize
            this.pageparm.total = res.obj.total;
  
            //
          } else {
  
          }
        });
    },
     	// 获取当前日期的方法
	getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = Year
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    // 获取老师姓名
    getTeacherData() {
      this.pageparm.currentPage = this.formInline1.page;
      this.pageparm.pageSize = this.formInline1.limit;
      this.$axios
        .post(
          "/training-instructor/findTrainInster/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize,
          this.formInline1
        )
        .then((res) => {
            if(res.code == 200) {
                this.teacherList= res.obj.records
            }
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    //搜索事件
    search() {
      console.log("aaaa", this.formInline);
      this.getdata(this.formInline);
    },
    //导出
    exportExcel() {
      htmlToExcel.getExcel("#selectTable", "导出的自定义标题");
    },
    //显示预览弹窗
    exportExcelSelect() {
      if (this.selectData.length < 1) {
        this.$message.error("请选择要导出的内容！");
        return false;
      }
      this.selectWindow = true;
    },
    //选中数据
    handleSelectionChange(val) {
      this.selectData = val;
    },
    //重置事件
    flush() {
      this.formInline.classname = "";
      this.formInline.classtype = "";
      this.formInline.examethod = "";
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      if (row != undefined && row != "undefined") {
        this.title = "修改";
        this.editForm.id = row.id;
        this.editForm.classid = row.classid;
        this.editForm.classtype = row.classtype;
        this.editForm.traintime = row.traintime;
        this.editForm.examethod = row.examethod;
        this.editForm.trainmanid=row.trainmanid;
        this.editForm.classname=row.classname;
        this.editForm.remark=row.remark;
        this.editForm.Cobjectives=row.Cobjectives;
        this.editForm.addOr = "edit";
      } else {
        this.title = "添加";
        this.editForm.classid = "TL" + (this.getProjectNum() + Math.floor(Math.random() * 10000));
        this.editForm.classtype = "";
        this.editForm.traintime = "";
        this.editForm.trainmethod = "";
        this.editForm.trainmanid = "";
        this.editForm.remark = "";
        this.editForm.examethod = "";
        this.editForm.classname = "";
        this.editForm.Cobjectives = "";
        this.editForm.addOr = "add";
      }
    },
    //编辑,增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          if (this.editForm.addOr == "add") {
            this.$axios
              .post("/course/addCourse", this.editForm)
              .then((res) => {
                if (res.code == 200) {
                  this.getdata(this.formInline);
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                  this.editFormVisible = false;
                } else {
                  this.$message({
                    type: "info",
                    message: res.message,
                  });
                  this.editFormVisible = false;
                }
              })
              .catch();
          }
          if (this.editForm.addOr == "edit") {
            this.$axios
              .put("/course/updateCourse", this.editForm)
              .then((res) => {
                if (res.code == 200) {
                  //修改成功后在刷新页面
                  this.getdata(this.formInline);
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                  //关闭修改框
                  this.editFormVisible = false;
                } else {
                  this.$message({
                    type: "info",
                    message: res.message,
                  });
                  //关闭修改框
                  this.editFormVisible = false;
                }
              })
              .catch();
          }
        } else {
          return false;
        }
      });
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("删除请求发送成功");
          this.$axios
            .delete("/course/deletCourse/" + row.id)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.message,
                });
                //重新渲染列表
                this.getdata(this.formInline);
              } else {
                this.$message({
                  type: "success",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("课程删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭编辑，增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.se_input {
  position: relative;
  left: 0px;
  top: 0px;
  width: 190px;
  height: 30px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-decoration: none;
  color: #000000;
}
#status_input {
  position: relative;
  left: 20px;
}
</style>